<!doctype html>
<html>

<head>
<include file="Include:meta" />
<title>标签管理-目的地运营集团数据管理平台</title>
<include file="Include:style" />
<style type="text/css">
.operation-item{cursor:pointer;display:inline-block;}
.operation-btn{display:none;}
.operation-item:hover .operation-btn{display:inline;}
.second-list{width:302px;}
.thrid-list{width:310px;float:left;}
</style>
</head>
<body>
<include file="Include:header" />
<include file="Include:left" />
<div id="main">
	<div class="crumbs">
		<div class="crumbs-text">{$types} > 标签管理</div>
	</div>
	<div id="content">
		<div class="table-scrollx">
			<table class="table table-bordered">
				<tr class="table-header">
					<td width="80">
						一级分类<!--a href="javascript:;" class="ml5 first-add"><i class="glyphicon glyphicon-plus"></i></a-->
					</td>
					<td>
						二级分类<a href="javascript:;" class="ml5 second-add"><i class="glyphicon glyphicon-plus"></i></a>
					</td>
					<td>
						三级分类<a href="javascript:;" class="ml5 third-add"><i class="glyphicon glyphicon-plus"></i></a>
					</td>
				</tr>
				<volist name="all_keywords" id="do" mod="2" key="k">
					<foreach name="do['second']" item="uo" key="kk"> 
						<tr <if condition="$k%2==0">class="bcf9"</if> > 
							<if condition="$kk eq '0'">
								<td rowspan="{$do['sum']}">
									<div class="first-list">
										{$do['first_name']}
									</div>
								</td>
							</if>
							<td>
								<div class="second-list">
									<span class="operation-item">{$uo['second_name']}<if condition="$do['id'] neq 68"><span class="operation-btn">
									<a href="javascript:;" class="ml5 edit-btn" data-toggle="tooltip" data-placement="right" title="编辑"><i class="glyphicon glyphicon-edit"></i></a></if>
									<if condition="$uo['del'] neq 1 and $do['sum'] neq 1"><a href="javascript:;" class="ml5 delete-btn" data-toggle="tooltip" data-placement="right" title="删除" mid="{$uo['id']}" bool="1" labels="2"><i class="glyphicon glyphicon-trash"></i></a></if>
									<if condition="$do['sum'] neq 1">
									<a href="javascript:;" class="ml5 sort-btn" data-toggle="tooltip" data-placement="right" title="排序" fid="{$do['id']}" labels="2"><i class="glyphicon glyphicon-resize-vertical"></i></a>
									</if></span></if></span>
									<span class="edit-item hide">
										<input type="text" class="form-control edit-input" val="{$uo['second_name']}" />
										<input type="button" class="btn edit-confirm" mid="{$uo['id']}" labels="2" value="确认" />
										<input type="button" class="btn btn-default edit-cancel" value="取消" />
									</span>
								</div>
							</td>
							<td>
								<foreach name="uo['third']" item="ao">
									<div class="thrid-list">
										<span class="operation-item">{$ao['third_name']}<span class="operation-btn">
											<a href="javascript:;" class="ml5 edit-btn" data-toggle="tooltip" data-placement="right" title="编辑"><i class="glyphicon glyphicon-edit"></i></a>
											<if condition="$ao['del'] neq 1 and $uo['sum'] neq 1">
											<a href="javascript:;" class="ml5 delete-btn" mid="{$ao['id']}" bool="1" labels="3" data-toggle="tooltip" data-placement="right" title="删除"><i class="glyphicon glyphicon-trash"></i></a>
											</if>
											<if condition="$uo['sum'] neq 1">
											<a href="javascript:;" class="ml5 sort-btn" fid="{$do['id']}" sid="{$uo['id']}" labels="3" data-toggle="tooltip" data-placement="right" title="排序"><i class="glyphicon glyphicon-resize-vertical"></i></a>
											</if></span></span>
										<span class="edit-item hide">
											<input type="text" class="form-control edit-input" val="{$ao['third_name']}" />
											<input type="button" class="btn edit-confirm" mid="{$ao['id']}" labels="3" value="确认" />
											<input type="button" class="btn btn-default edit-cancel" value="取消" />
										</span>
									</div>
								</foreach>
							</td>
						</tr> 
					</foreach>
				</volist>
			</table>
		</div>
		<div class="form-btn-item"><button class="btn btn-default goback" type="button">返回</button></div>
	</div>
</div>
<include file="Public:footer"/>
<!--删除弹框-->
<div class="modal fade" id="modal-delete" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4>确认提示框</h4>
				<i class="fa fa-times" aria-hidden="true" data-dismiss="modal"></i>
			</div>
			<div class="modal-body">您确定要删除吗？</div>
			<div class="modal-footer">
				<button type="button" class="btn delete-confirm">确认</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
<!--有数据删除弹框-->
<div class="modal fade" id="modal-delete2" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4>确认提示框</h4>
				<i class="fa fa-times" aria-hidden="true" data-dismiss="modal"></i>
			</div>
			<div class="modal-body">
				您确定要删除吗？<br />
				删除后将该分类移至<span class="ml5"><select name="types{$k}[val][]" class="form-control select-sd" autocomplete="off"></select></span>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn delete-confirm">确认</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
<!--/删除弹框-->
<!--添加弹框-->
<div class="modal fade" id="modal-add" >
	<div class="modal-dialog w700">
		<div class="modal-content">
			<div class="modal-header">
				<h4>添加分类</h4>
				<i class="fa fa-times" aria-hidden="true" data-dismiss="modal"></i>
			</div>
			<div class="modal-body">
				<table class="table table-bordered">
					<tr class="table-header fixed-table-header">
						<td width="33%">一级分类</td>
						<td width="33%">二级分类</td>
						<td width="34%">三级分类</td>
					</tr>
					<tr>
						<td class="first-td"></td>
						<td class="second-td"></td>
						<td class="third-td"></td>
					</tr>
				</table>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn add-confirm">确认</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
<!--/添加弹框-->
<!--排序弹框-->
<div class="sort-box hide">
	<div class="title">分类排序</div>
	<div class="sort-main">
		<ul></ul>
	</div>
	<div class="btn-item">
		<a href="javascript:;" class="btn sort-confirm">确认</a>
		<a href="javascript:;" class="btn btn-default sort-cancel">取消</a>
	</div>
</div>
<include file="Include:javascript" />
<script type="text/javascript" src="__PUBLIC__/js/ddsort.js"></script>
<script type="text/javascript">
	$(function(){
		//编辑
		$(".edit-btn").on("click",function(){
			var operation_item = $(this).parents(".operation-item"),
				edit_item = operation_item.next(".edit-item"),
				edit_input = edit_item.find(".edit-input");
			operation_item.hide();
			edit_item.show();
			edit_input.val(edit_input.attr("val"));
		});
		//编辑取消
		$(".edit-cancel").on("click",function(){
			var edit_item = $(this).parent(".edit-item").show(),
				operation_item = edit_item.prev(".operation-item"),
				edit_input = edit_item.find(".edit-input");
			operation_item.show();
			edit_item.hide();
			edit_input.removeClass("red");
		});
		//编辑确认
		$(".edit-confirm").on("click",function(){
			var edit_item = $(this).parent(".edit-item"),
				edit_input = edit_item.find(".edit-input"),
				val = edit_input.val(),
				mid = $(this).attr("mid"),
				labels = $(this).attr("labels");
			if(!edit_input.hasClass("red")){
				if(val==""){
					edit_input.val("必填项").addClass("red");
				}else if(/\s/.test(val)){
					edit_input.val("不能含有空格").addClass("red");
				}else{
					$.ajax({
						type:"POST",
						async:false,
						dataType:"json",
						url:"__APP__/System/label_administration_three_operate",
						data:{"name":val,"id":mid,"labels":labels,"action":"edit"},
						success:function(data){
							success_pop(data['status'],data['msg']);
						}
					});
				}
			}
		});
		//删除
		$(".delete-btn").on("click",function(){
			var mid = $(this).attr("mid"),
				bool = $(this).attr("bool"),
				labels = $(this).attr("labels"),
				dele = $(this).attr("dele");
			if(bool){
				$("#modal-delete").modal("toggle").find(".delete-confirm").attr({"mid":mid,"labels":labels,"bool":bool});
			}else{
				var modal = $("#modal-delete2");
				$.ajax({
					type:"POST",
					async:false,
					dataType:"json",
					url:"__APP__/System/label_administration_three_ajax",
					data:{"id":mid,"labels":4,"dele":dele},
					success:function(data){
						var option = "";
						for(var i=0;i<data.length;i++){
							option+="<option value="+data[i].id;
							if(i==0){
								option+=" selected ";
							}
							option+=">"+data[i].name+"</option>";
						}
						modal.find("select.select-sd").html(option);
					}
				});
				modal.find(".delete-confirm").attr({"mid":mid,"labels":labels});
				modal.modal("toggle");
			}
		});
		//删除确认
		$("#modal-delete").find(".delete-confirm").on("click",function(){
			var mid = $(this).attr("mid"),
				bool = $(this).attr("bool"),
				labels = $(this).attr("labels");
			$("#modal-delete").hide();
			$.ajax({
				type:"POST",
				async:false,
				dataType:"json",
				url:"__APP__/System/label_administration_three_operate",
				data:{"id":mid,"labels":labels,"action":"delete","bool":bool},
				success:function(data){
					success_pop(data['status'],data['msg']);
				}
			});
		});
		$("#modal-delete2").find(".delete-confirm").on("click",function(){
			var mid = $(this).attr("mid"),
				labels = $(this).attr("labels"),
				cid = $("#modal-delete2").find("select.select-sd").val();
			$("#modal-delete2").hide();
			$.ajax({
				type:"POST",
				async:false,
				dataType:"json",
				url:"__APP__/System/label_administration_three_operate",
				data:{"id":mid,"labels":labels,"cid":cid,"action":"delete","bool":""},
				success:function(data){
					success_pop(data['status'],data['msg']);
				}
			});
		});
		//一级分类添加
		$(".first-add").on("click",function(){
			var table = $("#modal-add").find(".modal-body table");
			table.find(".first-td").html("<input type='text' class='first-input add-input form-control' />");
			table.find(".second-td").html("<input type='text' class='second-input add-input form-control' />");
			table.find(".third-td").html("<input type='text' class='third-input add-input form-control' />");
			$("#modal-add").modal("toggle").find(".add-confirm").attr("labels",1);
		});
		//二级分类添加
		$(".second-add").on("click",function(){
			var table = $("#modal-add").find(".modal-body table"),
				classif = "{$classif}";
			$.ajax({
				type:"POST",
				async:false,
				dataType:"json",
				url:"__APP__/System/label_administration_three_ajax",
				data:{"labels":1,"classif":classif,"tj":2},
				success:function(data){
					var first_select = "<select class='first-select add-select form-control'>";
					first_select += "<option value='-10' selected>请选择</option>"
					for(var i=0;i<data.length;i++){
						first_select += "<option value="+data[i].id+">"+data[i].name+"</option>";
					}
					first_select += "</select>";
					table.find(".first-td").html(first_select);
					table.find("select.first-select").select2();
				}
			});
			table.find(".second-td").html("<input type='text' class='second-input add-input form-control' />");
			table.find(".third-td").html("<input type='text' class='third-input add-input form-control' />");
			$("#modal-add").modal("toggle").find(".add-confirm").attr("labels",2);
		});
		//三级分类添加
		$(".third-add").on("click",function(){
			var table = $("#modal-add").find(".modal-body table"),
				classif = "{$classif}";
			$.ajax({
				type:"POST",
				async:false,
				dataType:"json",
				url:"__APP__/System/label_administration_three_ajax",
				data:{"labels":1,"classif":classif,"tj":3},
				success:function(data){
					var first_select = "<select class='first-select add-select linkage-select form-control'>";
					first_select += "<option value='-10' selected>请选择</option>"
					for(var i=0;i<data.length;i++){
						first_select += "<option value="+data[i].id+">"+data[i].name+"</option>";
					}
					first_select += "</select>";
					table.find(".first-td").html(first_select);
					table.find("select.first-select").select2();
				}
			});
			table.find(".second-td").html("<select class='second-select add-select form-control'><option value='-10' selected>请先选择一级分类</option></select>");
			table.find("select.second-select").select2();
			table.find(".third-td").html("<input type='text' class='third-input add-input form-control' />");
			$("#modal-add").modal("toggle").find(".add-confirm").attr("labels",3);
		});
		$(document).on("change","select.linkage-select",function(){
			var table = $(this).parents("table"),
				mid = $(this).val();
			if(mid==-10){
				var second_select = "<option value='-10' selected>请先选择一级分类</option>";
				table.find("select.second-select").html(second_select).select2();
			}else{
				$.ajax({
					type:"POST",
					async:false,
					dataType:"json",
					url:"__APP__/System/label_administration_three_ajax",
					data:{"fid":mid,"labels":2},
					success:function(data){
						var second_select = "<option value='-10' selected>请选择</option>"
						for(var i=0;i<data.length;i++){
							second_select += "<option value="+data[i].id+">"+data[i].name+"</option>";
						}
						table.find("select.second-select").html(second_select).select2();
					}
				});
			}
		});
		//添加确认
		$("#modal-add").find(".add-confirm").on("click",function(){
			var table = $(this).parents("#modal-add").find("table"),
				labels = $(this).attr("labels"),
				tag = true;
			table.find("input.add-input").each(function(){
				var val = $(this).val();
				$(this).next(".red").remove();
				if(val==""){
					tag = false;
					$(this).after("<span class='red ml5'>必填项</span>");
				}else if(/\s/.test(val)){
					tag = false;
					$(this).after("<span class='red ml5'>不能含有空格</span>");
				}
			});
			table.find("select.add-select").each(function(){
				var val = $(this).val();
				if(val==-10){
					tag = false;
					$(this).nextAll(".red").remove();
					$(this).next(".select2").after("<span class='red ml5'>必填项</span>");
				}
			});
			if(tag){
				var first = "",
					second = "",
					third = "";
				if(labels==1){
					first = table.find(".first-input").val();
					second = table.find(".second-input").val();
					third = table.find(".third-input").val();
				}else if(labels==2){
					first = table.find("select.first-select").val();
					second = table.find(".second-input").val();
					third = table.find(".third-input").val();
				}else if(labels==3){
					first = table.find("select.first-select").val();
					second = table.find("select.second-select").val();
					third = table.find(".third-input").val();
				}
				$("#modal-add").hide();
				$.ajax({
					type:"POST",
					async:false,
					dataType:"json",
					url:"__APP__/System/label_administration_three_operate",
					data:{"first":first,"second":second,"third":third,"labels":labels,"action":"add"},
					success:function(data){
						success_pop(data['status'],data['msg']);
					}
				});
			}
		});
		//取消错误提示
		$(".edit-input").on("focus",function(){
			if($(this).hasClass("red")){
				$(this).val("").removeClass("red");
			}
		});
		$("#modal-add").on("focus",".add-input",function(){
			$(this).next(".red").remove();
		});
		$("#modal-add").on("change",".add-select",function(){
			$(this).nextAll(".red").remove();
		});
		//排序
		$(".sort-btn").click(function(){
			$("body").append("<div class='sort-mask'></div>");
			var box = $(".sort-box"),
				ul = $(".sort-box").find(".sort-main ul"),
				fid = $(this).attr("fid"),
				sid = $(this).attr("sid"),
				labels = $(this).attr("labels");
			box.find(".sort-confirm").attr("labels",labels);
			$.ajax({
				type:"POST",
				async:false,
				dataType:"json",
				url:"__APP__/System/label_administration_three_ajax",
				data:{"fid":fid,"sid":sid,"labels":labels},
				success:function(data){
					var list = "";
					for(var i=0;i<data.length;i++){
						list += "<li mid="+data[i].id+">"+data[i].name+"</li>";
					}
					ul.html(list);
				}
			});
			box.show();
			sortResize();
		});
		//排序框宽度自适应
		$(window).resize(function(){
			if($(".sort-box").is(":visible")){
				sortResize();
			}
		});
		function sortResize(){
			var box = $(".sort-box"),
				main = box.find(".sort-main"),
				ul = main.find("ul");
			main.width("auto");
			ul.width("auto");
			var w = main.width();
			ul.width(w);
			if(ul.outerHeight() > main.outerHeight()){
				main.width(w+18);
				box.width(w+18);
				$("#main").css("padding-left",w+18);
			}else{
				box.width(w);
				$("#main").css("padding-left",w);
			}
		}
		//排序确认
		$(".sort-confirm").on("click",function(){
			var box = $(this).parents(".sort-box"),
				labels = $(this).attr("labels"),
				mid_array = [];
			box.find(".sort-main li").each(function(i){
				mid_array[i] = $(this).attr("mid");
			});
			$.ajax({
				type:"POST",
				async:false,
				dataType:"json",
				url:"__APP__/System/label_administration_three_operate",
				data:{"mid_array":mid_array,"labels":labels,"action":"sort"},
				success:function(data){
					success_pop(data['status'],data['msg']);
				}
			});
		});
		//排序取消
		$(".sort-cancel").on("click",function(){
			$(".sort-box").hide();
			$(".sort-mask").remove();
			$("#main").css("padding-left",100);
		});
		//调用排序插件
		$(".sort-box").find(".sort-main").DDSort({
			target:'li',
			floatStyle:{
				'border-bottom':'0',
				'background-color':'#f49900',
				'box-shadow':'0 0 3px #ddd',
				'list-style-type':'disc'
			},
			cloneStyle:{
				'background-color':'#ddd'
			}
		});
	});
</script>
</body>
</html>